<template>
  <div class="bg" :style="imgStyle1">
    <div class="user-info">
      <div class="info-title">
        <h2>基本资料</h2>
        <button @click="handleEdit()" class="editbtn">修改档案</button>
      </div>
      <f-form class="info-body" :model="userInfoList">
        <!-- 上传头像及修改密码 -->
        <div class="info-all-item">
          <el-avatar
            :src="imageUrl"
            class="user-img"
            v-show="!isavatarEdit"
          ></el-avatar>
          <!-- action="http://124.71.219.15:8083//management_system/user/updateHead"
                 :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload" -->
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            ref="uploadHeadImg"
            action="none"
            :auto-upload="false"
            :on-change="checkType"
            v-show="isavatarEdit"
            enctype="multipart/form-data"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <button
            @click="isavatarEdit = !isavatarEdit"
            v-show="!isavatarEdit"
            class="editavatarbtn"
          >
            修改头像
          </button>
          <button
            @click="saveAvatar"
            v-show="isavatarEdit"
            class="editavatarbtn"
          >
            保存头像
          </button>
          <div class="changepsw" @click="changePassword">点击修改密码</div>
          <!-- 更改密码组件 -->
        </div>
        <el-divider direction="vertical"></el-divider>
        <!-- 不可修改的板块 -->
        <div class="info-all-item">
          <!-- 姓名 -->
          <div class="info-item">
            <label>姓 名</label>
            <span>{{ userInfoList.username }}</span>
          </div>
          <!-- 性别 -->
          <div class="info-item">
            <label>性 别</label>
            <span v-if="userInfoList.sex === 'female'">女</span>
            <span v-else-if="userInfoList.sex === 'male'">男</span>
          </div>
          <!-- 学科  -->
          <div class="info-item">
            <label>学 科</label>
            <span>{{ direction[1] }}</span>
          </div>
          <!-- 权限 -->
          <div class="info-item">
            <label>权 限</label>
            <span>{{ userInfoList.privilege }}</span>
          </div>
          <!-- 状态 -->
          <div class="info-item">
            <label>学 期 </label>
            <span>{{ userInfoList.issue }}</span>
          </div>
          <!-- 积分 -->
          <div class="info-item">
            <label>积 分</label>
            <span>{{ userInfoList.point }}</span>
          </div>
        </div>
        <el-divider direction="vertical"></el-divider>
        <!-- 可以修改的板块 -->
        <div class="info-all-item">
          <!-- 邮箱 -->
          <div class="info-item">
            <label>邮 箱</label>
            <span v-show="!isEdit">{{ userInfoList.email }}</span>
            <form-input
              type="text"
              v-show="isEdit"
              :value="userInfoList.email"
              :disabled="true"
              style="width: 70%"
            ></form-input>
          </div>
          <!-- 手机 -->
          <div class="info-item">
            <label>手 机</label>
            <span v-show="!isEdit">{{ userInfoList.telephone }}</span>
            <form-input
              type="text"
              v-show="isEdit"
              :value="userInfoList.telephone"
              :disabled="true"
              style="width: 70%"
            ></form-input>
          </div>
          <!-- 部门 -->
          <div class="info-item">
            <label>部 门</label>
            <span v-show="!isEdit">{{ userInfoList.department }}</span>
            <form-input
              type="text"
              v-show="isEdit"
              v-model="userInfoList.department"
              style="width: 70%"
            ></form-input>
          </div>
          <!-- 学校 -->
          <div class="info-item">
            <label>学 校</label>
            <span v-show="!isEdit">{{ userInfoList.college }}</span>
            <form-input
              type="text"
              v-show="isEdit"
              v-model="userInfoList.college"
              style="width: 70%"
            ></form-input>
          </div>
          <!-- 专业 -->
          <div class="info-item">
            <label>专 业</label>
            <span v-show="!isEdit">{{ userInfoList.major }}</span>
            <form-input
              type="text"
              v-show="isEdit"
              v-model="userInfoList.major"
              style="width: 70%"
            ></form-input>
          </div>
          <!-- 生日 -->
          <div class="info-item">
            <label>生 日</label>
            <span v-show="!isEdit">{{ userInfoList.birthday }}</span>
            <el-date-picker
              v-model="userInfoList.birthday"
              type="date"
              v-show="isEdit"
              style="width: 70%"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </div>
        </div>
      </f-form>
      <!-- 保存按钮 -->
      <div class="info-foot" v-show="isEdit">
        <button class="info-fo-bnt savebnt" @click="save()">保存</button>
        <button class="info-fo-bnt" @click="off()">取消</button>
      </div>
    </div>
    <div class="delayBackground" v-show="visible">
      <Application
        :visible.sync="visible"
        :isShow="false"
        :notShow="false"
        :updatapass="updatapass"
      ></Application>
    </div>
  </div>
</template>

<script>
import "@/assets/css/userInfo.css";
import Application from "@/pages/ordinaryuser/Application.vue";
export default {
  components: { Application },
  data() {
    return {
      imgStyle1: {
        backgroundImage: `url(${require("@/assets/images/bgc.png")})`,
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover",
      },
      // 是否处于编辑状态
      isEdit: false,
      isavatarEdit: false,
      userInfoList: {},
      direction: JSON.parse(window.localStorage.getItem("datas")),
      imageUrl: "",
      headImgFile: null,
      //更改密码
      updatapass: null,
      visible: false,
    };
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      this.$http({
        method: "get",
        url: `user/selectById?id=${this.$store.state.LoginData.userformation[0].id}`,
      }).then(({ data }) => {
        let obj = data.data;
        // console.log(obj);
        this.userInfoList = obj;
        this.userInfoList.point = "";
        this.userInfoList.issue = "";
        // if (this.userInfoList.url != null) {
        //   this.imageUrl = "http://" + this.userInfoList.url;
        // } else {
          this.imageUrl =
            "http://raexshntn.hn-bkt.clouddn.com/8483ceee-402d-4d9d-82f8-98ac2737c3d8";
        // }
      });
    },
    // 编辑界面
    handleEdit() {
      this.isEdit = !this.isEdit;
    },
    save() {
      let obj = {};
      for (var k in this.userInfoList) {
        obj[k] = this.userInfoList[k];
      }
      this.userInfoEdit(obj);
      this.isEdit = false;
    },
    // 取消按钮
    off() {
      this.isEdit = false;
    },
    // 上传头像
    checkType(file, fileList) {
      let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
      fileList = [];
      if (fileType != "jpeg" && fileType !== "jpg" && fileType !== "png") {
        this.$message.error("erroe", "头像格式不正确！");
        return false;
      }
      if (file.size / 1024 / 1024 > 1.5) {
        this.$message.error("erroe", "上传头像图片大小不能超过1.5M！");
        return false;
      }
      this.headImgFile = file;
      this.imageUrl = URL.createObjectURL(this.headImgFile.raw);
      let formData = new FormData();
      console.log(this.headImgFile);
      formData.append("file", this.headImgFile.raw);
      formData.append("userId", this.userInfoList.id);
      console.log(formData.get("file"));
      this.$http({
        method: "post",
        headers: {
          "content-Type": "application/form-data",
        },
        url: `user/updateHead`,
        data: formData,
      }).then(({ data }) => {
        if (data.flag) {
          this.imageUrl = "http://" + data.data;
          localStorage.setItem("userAvatar", this.imageUrl);
        } else {
          this.$message("error", "上传头像失败！");
        }
      });
    },
    // 保存头像
    saveAvatar() {
      this.isavatarEdit = !this.isavatarEdit;
      this.$bus.$emit("avatar", this.imageUrl);
      localStorage.userAvatar = this.imageUrl;
    },
    // 更改密码
    changePassword() {
      this.visible = true;
      this.updatapass = true;
    },
  },
  mounted() {
    this.getUserInfo();
  },
};
</script>

<style lang="less" scoped>
.delayBackground {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 98;

  background-color: rgba(0, 0, 0, 0.5);
}
.info-item /deep/.el-input--prefix .el-input__inner {
  padding-left: 40px;
}
.el-divider--vertical {
  height: 350px;
}
</style>>
